<template>
  <div class="body">
    <div class="body_main">
      <div class="search_header">
        <el-button
          icon="el-icon-arrow-left"
          size="mini"
          circle
          @click="back"
          style="margin-right: 12px"
        ></el-button>
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>用户日志</span>
        <span>/</span>
        <span>操作日志详情</span>
        <div
          style="float: right"
          class="search_header_right"
        >
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="search"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="search_header" style="font-size: 18px">
        <span style="margin-right: 0; font-weight: bold"
          >用户名</span
        >
        <span style="font-weight: bold"
          >({{ userInfo.userName }})</span
        >
        <span style="margin-right: 6px">部门:</span>
        <span>{{ userInfo.deptName }}</span>
      </div>
      <el-table
        :data="userList"
        :header-cell-style="{
          background: '#F2F6FB ',
          color: ' #6B767D'
        }"
        height="654px"
        style="padding: 0 30px"
        :row-class-name="tableRowClassName"
      >
        <!-- <el-table-column label='序号' align="center" show-overflow-tooltip width="80">
            <template slot-scope='scope'>
                {{ scope.$index + 1 }}
              </template>
          </el-table-column> -->
        <el-table-column
          label="操作时间"
          prop="createTime"
          show-overflow-tooltip
          align="center"
        />
        <!-- <el-table-column label='登录IP' prop='requestIp' show-overflow-tooltip /> -->
        <el-table-column
          label="操作结果"
          prop="behavior"
          show-overflow-tooltip
          align="center"
        />
        <!-- <el-table-column label='所属单位' prop='deptName' show-overflow-tooltip/>
        <el-table-column label='最后登录时间' prop='lastLoginTime' show-overflow-tooltip/>
        <el-table-column label='登录次数' prop='loginTimes'/> -->
      </el-table>
      <div
        style="float: right; margin-top: 15px"
        v-if="total"
      >
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogBehaviorQuery } from '@/api/user'

export default {
  name: 'index',
  data() {
    return {
      userList: [],
      total: '',
      headerTitle: '新增用户',
      pkid: '',
      parameter: {
        pageSize: 10,
        pageIndex: 1,
        userId: '',
        end: '',
        start: ''
      },
      forbidden: false,
      start: true,
      dateTime: [],
      userInfo: {}
    }
  },
  watch: {
    start(value) {
      if (value) {
        this.forbidden = false
        this.addUser.userstate = 1
      }
    },
    forbidden(value) {
      if (value) {
        this.start = false
        this.addUser.userstate = 0
      }
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$route.query.data)
    this.parameter.userId = this.userInfo.pkid
    this.getList()
  },
  methods: {
    back() {
      this.$router.push('/mochaITOM/userRecord')
    },
    search() {
      this.parameter.pageIndex = 1
      this.total = ''
      if (this.dateTime.length) {
        this.parameter.start = this.dateTime[0]
        this.parameter.end = this.dateTime[1]
      } else {
        this.parameter.start = ''
        this.parameter.end = ''
      }
      this.getList()
    },
    // pageChange
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },
    // 获取用户列表
    getList() {
      userLogBehaviorQuery(this.parameter).then((res) => {
        if (res.success) {
          this.userList = res.data.list
          this.total = res.data.count
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // tanble row
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: 100%;
  padding: 18px 15px 15px 16px;

  &_main {
    width: 100%;
    background: white;
    padding: 15px 0;
    border-radius: 2px;
    .search_header {
      position: relative;
      margin-bottom: 13px;
      height: 40px;
      line-height: 40px;
      padding: 0 30px;
      //   i{
      //       margin-right: 12px;
      //       cursor: pointer;
      //   }
      span {
        margin-right: 12px;
      }
      //   ::v-deep .el-button{
      //     background: #497FA3 !important;
      //     color: white !important;
      //     border: none !important;
      //     border-radius: 2px;
      //     //height: 30px !important;
      //     //width: 90px !important;
      //     //padding: 9px 13px !important;
      //   }
      &_right {
        float: right;
        display: flex;
      }
      &_right::v-deep {
        .el-input {
          width: 50%;
          margin-right: 8px;
          .el-input__inner {
            // background: #f6f9fc !important;
            color: #a7adb5 !important;
            height: 32px !important;
            // width: 228px !important;
            .el-input__icon {
              width: 16px !important;
              height: 16px !important;
              font-size: 16px !important;
            }
          }
        }
        .el-range-editor.is-active,
        .el-range-editor.is-active:hover {
          border-color: #dcdfe6;
        }
        .el-date-editor {
          // background: #f6f9fc !important;
          color: #a7adb5 !important;
          height: 32px !important;
          .el-range__icon,
          .el-input__icon,
          .el-range-separator {
            line-height: 24px;
            color: #a7adb5 !important;
          }
          .el-range-input {
            // background: #f6f9fc !important;
            color: #a7adb5 !important;
            height: 32px !important;
            width: 228px !important;
            border-top: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
          }
        }
        .el-input__suffix {
          top: 1px !important;
          right: 8px !important;
        }
        .el-select {
          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
          }
          .el-input__suffix {
            top: 4px !important;
          }
          .is-focus {
            .el-input__suffix {
              top: -3px !important;
            }
          }
        }
        .el-cascader {
          top: -4px;
          .el-input__inner {
            width: 170px !important;
            margin-left: 10px;
          }
        }
      }
    }
    ::v-deep.light {
      background: #f9fcff;
      border: 1px solid #f2f6fb !important;
    }
    ::v-deep .el-table__row {
      .el-table__cell {
        padding: 6px !important;
      }
    }
  }
  ::v-deep .el-dialog {
    .el-dialog__header {
      background: #597182 !important;
      padding: 8px 0 14px 24px !important;
      height: 39px !important;
      .el-dialog__title {
        font-size: 16px !important;
        line-height: 22px;
        font-weight: 400 !important;
        color: white !important;
        //margin:19px 0 14px 24px !important;
      }
      .el-dialog__headerbtn {
        font-size: 16px;
        top: 10px !important;
        right: 17px !important;
        color: white !important;
        .el-dialog__close {
          color: white !important;
        }
      }
    }
    .el-dialog__body {
      padding: 17px 32px 18px 26px !important;
      .el-form-item {
        margin-bottom: 19px !important;
      }
    }
    .el-input__inner {
      height: 34px !important;
      background-color: #f6f9fc !important;
    }
    .el-button--default {
      border-color: #497fa3 !important;
      span {
        color: #497fa3 !important;
      }
    }
    .el-button--primary {
      background: #497fa3 !important;
      border-color: white !important;
    }
  }
  ::v-deep .el-pagination {
    .active {
      background: #f6f9fc !important;
      color: #00baff !important;
    }
    button {
      border: 1px solid #ebf1f8 !important;
      background: white !important;
      color: #a7adb5 !important;
    }
    li {
      background: white !important;
      color: #00baff !important;
      border: 1px solid #ebf1f8;
      border-radius: 2px;
      font-weight: 400 !important;
      font-size: 12px !important;
      line-height: 25px !important;
    }
  }
}
</style>
